<template>
  <starGenView :title="'userDefault'" class="content">
    <Row>
      <Col class="leftwp" :span="8">
      <Card title="全部菜单">
        <Tree :data="treeData" show-checkbox @on-check-change="onCheck"></Tree>
      </Card>
      </Col>
      <Col class="rightwp" flex="1">
        <Card title="收藏的菜单">
          <Tree :data="selectTreeData" @on-select-change="onSelect"></Tree>
        </Card>
      </Col>
    </Row>
  </starGenView>
</template>

<script>
import cascaderModel from './cascaderModel'

let lsKey = 'userDefaultSelect'
export default {
  name: "userDefault",
  components: {cascaderModel},
  data() {
    return {
        selectNodes: [],
        selectTreeData: [],
    }
  },
  created() {
      this.selectNodes = JSON.parse(window.localStorage.getItem(lsKey) || '[]')
      this.selectTreeData = this.selectNodes.filter(item => !item.children || !item.children.length)
  },
  methods: {
    onSelect(item) {
      this.$router.push({name: item[0].name})
    },
    onCheck(items) {
      this.selectNodes = items
      this.selectTreeData = this.selectNodes.filter(item => !item.children || !item.children.length)
      window.localStorage.setItem(lsKey, JSON.stringify(items))
    },
    getChild(item) {
      item.children = item.children ? item.children.map(cItem => {
        return this.getChild(cItem)
      }) : []
      return {
        ...item,
        checked: !!this.selectNodes.find(sItem => sItem.name === item.name),
        title: item.meta && item.meta.title ? item.meta.title[this.G_Locale] : '',
        expand: true,
      }
    }
  },
  computed: {
    treeData() {
      let res = this.G_Menu.map(item => {
        return this.getChild(item)
      });
      return this.lodash.cloneDeep(res)
    },
  },
  props: {
  },
}
</script>

<style scoped lang="less">
.content {
  background-color: #fff;
}
.leftwp, .rightwp {
  // width: 300px;
  height: calc(~"100vh - 200px");
  overflow: auto;
}
.item {
  width: 25%;
  height: 40px;
  line-height: 40px;
  margin: 8px;
  border: 1px solid #eee;
  text-align: center;
  cursor: pointer;
  &:hover {
    color: var(--primary-color);
  }
}
</style>
